<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
</head>

<body>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios-0.18.0.js"></script>

    <div id="app">
        <el-row>
            <el-col :span="2">
                <div>&nbsp;</div>
            </el-col>
            <el-col :span="20">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1" @click="click1"> 个 人 中 心 </el-menu-item>
                    <el-menu-item index="2" @click="click2"> 词 法 分 析 </el-menu-item>
                    <el-menu-item index="3" @click="click3"> 语 法 分 析 </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="2">
                <div>&nbsp;</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col>&nbsp;</el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <div>&nbsp;</div>
            </el-col>
            <el-col :span="6">
                <br>
                <el-avatar src="img/avatar.jpg" :size="250"></el-avatar>
            </el-col>
            <el-col :span="6">
                <el-form ref="form" :model="user" label-width="100px">
                    <el-form-item label="姓  名">
                        <el-input v-model="user.name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input v-model="user.telephone"></el-input>
                    </el-form-item>
                    <el-form-item label="账  号">
                        <el-input v-model="user.account" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="密  码">
                        <el-input v-model="user.password"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="updateUser" round>修 改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6">
                <div>&nbsp;</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="4">
                <div>&nbsp;</div>
            </el-col>
            <el-col :span="16">
                <el-divider></el-divider>
            </el-col>
            <el-col :span="4">
                <div>&nbsp;</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <div>&nbsp;</div>
            </el-col>
            <el-col :span="12">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" width="100"></el-table-column>
                    <el-table-column prop="time" label="提 交 时 间" width="254"></el-table-column>
                    <el-table-column prop="account" label="用 户 账 号" width="254"></el-table-column>
                    <el-table-column label="操 作" width="150">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text">查 看 代 码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="6">
                <div>&nbsp;</div>
            </el-col>
        </el-row>

        <el-dialog title="历 史 代 码" :visible.sync="dialogVisible" width="60%">
            <el-input type="textarea" :rows="20" placeholder="" v-model="textarea" :disabled="false"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el: "#app",

            mounted() {
                let url = location.search; //获取url中"?"符后的字串
                if (url.indexOf("?") != -1) {    //判断是否有参数
                    // 从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
                    let str = url.substr(1).split("=");   //用等号进行分隔
                    this.user.account = str[1];
                }
                else {
                    this.$message.error("错误！非法访问");
                    location.replace("http://localhost:8080/home.html");
                }
                this.getAccount();
                this.getCode();
            },

            methods: {
                getAccount() {
                    this.user.password = "!!!!!";
                    axios.get("http://localhost:8080/users/" + this.user.account + "/" + this.user.password).then(resp => {
                        this.user.password = resp.data.data.password;
                        this.user.telephone = resp.data.data.telephone;
                        this.user.name = resp.data.data.name;
                        this.user.id = resp.data.data.id;
                    }
                    );
                },
                getCode() {
                    axios.get("http://localhost:8080/word").then(resp => {
                        this.tableData = resp.data.data;
                    });
                },
                updateUser() {
                    axios.put("http://localhost:8080/users/", this.user).then(resp => {
                        if (resp.data.code === 20031) {
                            this.$message.success("修改成功！");
                            this.getAccount();
                        }
                        else if (resp.data.code === 20030) {
                            this.$message.error("修改失败！");
                        }
                        else {
                            this.$message.error("服务器请求超时！");
                        }
                    });
                },
                click1() {
                    location.replace("http://localhost:8080/user.html?account=" + this.user.account);
                },
                click2() {
                    location.replace("http://localhost:8080/word.html?account=" + this.user.account);
                },
                click3() {
                    location.replace("http://localhost:8080/phrase.html?account=" + this.user.account)
                },
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClick(row) {
                    this.textarea = row.code;
                    this.dialogVisible = true;
                }
            },

            data() {
                return {
                    activeIndex: "1",
                    user: {
                        id: "",
                        account: "",
                        password: "",
                        name: "",
                        telephone: ""
                    },
                    tableData: [],
                    textarea: "",
                    dialogVisible: false
                }
            }
        })
    </script>
</body>

</html>